<template>
	<div class="h-[432px]">
		<div id="mse" class="!w-full !h-full aspect-video"></div>
	</div>
</template>
<script setup lang="ts">

import Player from 'xgplayer';
import { Events } from 'xgplayer'
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls'
import type { infoType } from '@/api/operate/video-management/index';




type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	videoUrl: string,
	playDuration: any
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	videoUrl: "",
	playDuration: null
});
console.log("props", props);

const timer = ref(null)

onMounted(() => {
	const player = new Player({
		id: 'mse',
		url: props.videoUrl,
		plugins: [HlsPlugin],
	})
	player.on(Events.PLAY, () => {
		if (props.playDuration) {
			timer.value && clearTimeout(timer.value)
			timer.value = setTimeout(() => {
				player.pause()
			}, props.playDuration * 60 * 1000);
		}
	})
});
onBeforeUnmount(() => {
	timer.value && clearTimeout(timer.value)
});

</script>